<template>
  <div class="home-page">
    <el-container>
      <el-header>
        <div class="logo" @click="gotoHome">MyBlog</div>
        <el-menu mode="horizontal" class="el-menu-demo" background-color="#545c64" text-color="#fff"
          active-text-color="#ffd04b">
          <router-link to="/home">
            <el-menu-item index="1">首页</el-menu-item>
          </router-link>
          <router-link to="/layout">
            <el-menu-item index="2">管理博客</el-menu-item>
          </router-link>
          <router-link to="/">
            <el-menu-item index="3">返回登录界面</el-menu-item>
          </router-link>
        </el-menu>
      </el-header>

      <el-main>
        <transition name="fade">
          <el-card class="box-card" v-if="articles.length > 0">
            <div slot="header" class="clearfix">
              <span>博客列表</span>
            </div>
            <el-table :data="articles" style="width: 100%" @row-click="handleRowClick">
              <el-table-column label="博客标题" width="400" prop="title"></el-table-column>
              <el-table-column label="分类" prop="categoryName"></el-table-column>
              <el-table-column label="博客概要" prop="summary"></el-table-column>
              <el-table-column label="发表时间" prop="createTime"> </el-table-column>
              <template #empty>
                <el-empty description="没有数据" />
              </template>
            </el-table>
            <!-- 分页条 -->
            <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"
              layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"
              @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />
          </el-card>
        </transition>
      </el-main>
    </el-container>

    <el-footer class="footer">
      <div class="footer-content">Myblog ©2025 Created by 来杯whiskey</div>
    </el-footer>
  </div>
</template>

<script setup>
import {
  Edit,
  Delete
} from '@element-plus/icons-vue'

import { ref } from 'vue'

//博客分类数据模型
const categorys = ref([])

//用户搜索时选中的分类id
const categoryId = ref('')

//博客列表数据模型
const articles = ref([])

//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(3)//每页条数

// 获取全部分类
import { articleCategoryListAllService } from '@/api/article.js';
const articleCategory = async () => {
  let result = await articleCategoryListAllService();
  // 过滤出 categoryName 不重复的项
  categorys.value = result.data;
  console.log(result.data);
}
articleCategory();

// 博客分页列表
import { articleListAllService } from '@/api/article.js';
const articleList = async () => {
  let params = {
    pageNum: pageNum.value,
    pageSize: pageSize.value,
    categoryId: categoryId.value ? categoryId.value : null
  }
  let result = await articleListAllService(params);
  total.value = result.data.total;
  articles.value = result.data.items;

  // 扩展categoryName属性
  for (let i = 0; i < articles.value.length; i++) {
    let article = articles.value[i]; // 获取第i篇博客
    // 对于第i篇博客，遍历博客分类列表，找到对应的博客分类名称
    for (let j = 0; j < categorys.value.length; j++) {
      if (article.categoryId == categorys.value[j].id) {
        article.categoryName = categorys.value[j].categoryName;
      }
    }
  }
}
articleList();
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size;
  articleList();
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num;
  articleList();
}

import { Plus } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router';

const router = useRouter();
const handleRowClick = (row) => {
  router.push({
    path: `/article/detail/${row.id}`,
    // 传递参数
    query: {
      categoryName: encodeURIComponent(row.categoryName)
    }
  });
}
</script>

<style scoped>
router-link a {
  text-decoration: none !important;
}

router-link {
  text-decoration: none;
  /* 去除下划线 */
  color: inherit;
  /* 继承周围文字的颜色 */
}

router-link-active {
  text-decoration: none;
  /* 去除激活状态下的下划线 */
}

body {
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

.home-page {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(5px);
  /* 其他样式 */
}

.home-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #f5f5f5;
}

.el-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: #545c64;
  color: white;
}

.logo {
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s;

  &:hover {
    color: #ffd04b;
  }
}

.el-menu-demo {
  line-height: 60px;
  background-color: transparent;

  .el-menu-item {
    transition: background-color 0.3s, color 0.3s;

    &:hover {
      background-color: #333;
      color: #ffd04b;
    }
  }
}

.el-main {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

.box-card {
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  transition: box-shadow 0.3s;

  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
}

.el-table {
  transition: opacity 0.5s;
  opacity: 1;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 10px 0;
}

/* 淡入动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>